<!--
 * @Author: your name
 * @Date: 2021-09-05 22:30:50
 * @LastEditTime: 2021-12-14 00:49:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \leYi\components\Goods\goodsBanner.vue
-->
<template>
  <view>
    <view class="bannerBox u-skeleton">
      <view class="noticeBar" v-if="randomName">
        <view class="noticStyle">{{ noticeBar }}</view>
      </view>
      <view class="goodsBanner">
        <!-- <u-image width="750rpx" height="750rpx" :src="src" mode="widthFix"></u-image> -->
        <view class="banner">
          <u-swiper
            height="750"
            mode="number"
            indicator-pos="bottomRight"
            :list="goodsBannerData.slider_image"
          ></u-swiper>
          <view class="activeBox" v-if="isActive">
            <view class="activeLeft">
              <view class="activeLeftPrice">
                <view class="oldPrice"
                  >￥{{
                    goodsBannerData.price ? goodsBannerData.price : 0
                  }}</view
                >
                <view class="throwLine"
                  >原价:￥{{
                    goodsBannerData.ot_price ? goodsBannerData.ot_price : 0
                  }}</view
                >
              </view>
              <!-- <view class="getCouponPrice">
                领券价:￥{{
                  goodsBannerData.vip_price ? goodsBannerData.vip_price : 0
                }}
              </view> -->
            </view>
            <view class="activeRight">
              <view class="activeShop"
                >已售：{{
                  goodsBannerData.sales ? goodsBannerData.sales : 0
                }}</view
              >
            </view>
          </view>
        </view>
      </view>

      <view class="goodsPrice">
        <u-row v-if="!isActive" justify="between" align="center">
          <u-col span="9">
            <view class="titlebox">
              <view class="pricebox">
                <text class="nowPrice"
                  >￥{{ typeData.price ? typeData.price : 0 }}</text
                >
                <text class="yuanjia"
                  >￥{{ typeData.ot_price ? typeData.ot_price : 0 }}</text
                >
              </view>
              <text class="countPrice" v-if="goodsBannerData.vip_price > 0"
                >￥{{ typeData.vip_price ? typeData.vip_price : 0 }}</text
              >
              <text class="huiyuan" v-if="goodsBannerData.level > 0">{{
                goodsBannerData.level_name
              }}</text>
            </view>
          </u-col>
          <u-col span="3">
            <view class="rightIcon" @click="handleToApplet">
              <u-image width="42rpx" height="42rpx" :src="share"></u-image>
            </view>
          </u-col>
        </u-row>
        <u-row v-if="!isActive">
          <u-col span="12">
            <text class="goodsName">{{ goodsBannerData.store_name }}</text>
          </u-col>
        </u-row>

        <u-row v-if="isActive">
          <u-col span="10">
            <text class="goodsName">{{ goodsBannerData.store_name }}</text>
          </u-col>
          <u-col span="2">
            <view @click="handleToApplet">
              <u-image
                style="margin-top: 24rpx;
    display: block;"
                width="52rpx"
                height="52rpx"
                :src="sharesingle"
              ></u-image>
            </view>
          </u-col>
        </u-row>

        <u-row justify="between" align="center" style="padding-top:30rpx;">
          <u-col span="12">
            <view>
              <text class="shopDes">{{ goodsBannerData.store_info }}</text>
            </view>
          </u-col>
        </u-row>
        <u-row>
          <u-col span="12" v-if="!isActive">
            <view>
              <text class="rightSales"
                >销量:{{ typeData.sales ? typeData.sales : 0 }}</text
              >
            </view>
          </u-col>
        </u-row>
      </view>
      <!-- 单品广告 -->
      <view v-if="isActive" class="single">
        <text class="singleText">现在下单笔笔返现，有机会免单</text>
      </view>
      <!-- 广告 -->
      <view v-if="!isActive" class="advertising">
        <u-row justify="between" align="center">
          <u-col span="9">
            <view class="ap">
              <u-image
                class="iconPrice"
                width="44rpx"
                height="44rpx"
                :src="coupon"
              ></u-image>
              <!-- <text class="adWord"
              >下单返￥{{ goodsBannerData.refund }},等级越高返现越高</text
            > -->
              <text class="adWord">
                现在下单笔笔返现，有机会免单
              </text>
            </view>
          </u-col>
          <!-- <u-col span="3">
          <view class="goUpdate" @click="handleUpdate">
            <text>去升级》</text>
          </view>
        </u-col> -->
        </u-row>
      </view>
    </view>
  </view>
</template>
<script>
import { listNoticeBar } from "@/utils/static.js";
import { mapState } from "vuex";

export default {
  props: {
    goodsBannerData: {
      type: Object,
      default: () => ({})
    },
    typeData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapState({
      isActive: state => state.isActive // 是否为单品标识
    })
  },
  mounted() {
    console.log("isActive", this.isActive);
  },
  data() {
    return {
      share: "/static/share.png",
      coupon: "/static/coupon.png",
      sharesingle: "/static/sharesingle.png",
      noticeBar: "",
      listNoticeBar: listNoticeBar,
      randomName: false,
      bargain: "http://qzcqauo4y.hn-bkt.clouddn.com/goods/bargain.png", // 砍价图标
      goodsMsg: {}
    };
  },
  mounted() {
    this.getRandonName();
  },
  methods: {
    // 随机生成购买者名单
    getRandonName() {
      setTimeout(() => {
        this.sleep();
      }, 2000);
      this.randomName = false;
      let random = Math.round(Math.random() * this.listNoticeBar.length - 1);
      this.noticeBar = this.listNoticeBar[random];
    },
    sleep() {
      setTimeout(() => {
        this.getRandonName();
      }, 4000);
      this.randomName = true;
    },
    handleToApplet() {
      this.$emit("handleJump");
    }
  }
};
</script>
<style lang="scss" scoped>
.single {
  width: 722rpx;
  margin: 0 auto;
  height: 50rpx;
  background: #d83643;
  opacity: 1;
  border-radius: 26rpx;
  display: flex;
  justify-content: center;
  .singleText {
    text-align: center;
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 50rpx;
    color: #ffffff;
    letter-spacing: 15rpx;
    opacity: 1;
  }
}
.activeBox {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0rpx;
  .activeLeft {
    width: 490rpx;
    height: 100rpx;
    background: #d83643;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .activeLeftPrice {
      display: flex;
      justify-content: center;
      flex-direction: column;
      .oldPrice {
        height: 70rpx;
        font-size: 60rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
      .throwLine {
        height: 30rpx;
        font-size: 16rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #e3e3e3;
        text-decoration: line-through;
        opacity: 1;
      }
    }
    .getCouponPrice {
      width: 236rpx;
      height: 50rpx;
      background: #bb2a3b;
      opacity: 1;
      border-radius: 8rpx;
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #f9eb82;
      opacity: 1;
      text-align: center;
      margin-left: 20rpx;
    }
  }
  .activeRight {
    width: 260rpx;
    height: 100rpx;
    background: #f9eb82;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .activeShop {
      width: 210rpx;
      height: 52rpx;
      background: #bb2a3b;
      opacity: 1;
      border-radius: 8rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 52rpx;
      color: #ffffff;
      opacity: 1;
      text-align: center;
    }
  }
}

.conform {
  display: flex;
  height: 100rpx;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: left;
  color: #000;
  line-height: 100rpx;
  letter-spacing: 2rpx;
  text-align: center;
}
.shareList {
  display: flex;
  justify-content: center;
  height: 200rpx;
  .firendList,
  .haibao {
    width: 375rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .word {
      font-size: 32rpx;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      text-align: left;
      color: #000;
      line-height: 66rpx;
      letter-spacing: 2rpx;
      text-align: center;
    }
  }
}
.banner {
  width: 750rpx;
  height: 750rpx;
}
.bannerBox {
  padding-bottom: 30rpx;
  .intro_view {
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    .integral_val {
      width: 100%;
      height: 82rpx;
      overflow: hidden;
      line-height: 102rpx;
      font-size: 42rpx;
      color: #fb4d2e;
      text {
        margin-left: 22rpx;
      }
    }
    .integral_name {
      width: 100%;
      height: 108rpx;
      overflow: hidden;
      line-height: 78rpx;
      font-size: 38rpx;
      color: #333333;
      padding-bottom: 30rpx;
      text {
        margin-left: 22rpx;
      }
    }
  }
  .select_content {
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #ffffff;
    margin-top: 18rpx;
    .view_line {
      width: 100%;
      height: 98rpx;
      line-height: 98rpx;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 32rpx;
      .name_left {
        width: auto;
        height: 100%;
        overflow: hidden;
        color: #707070;
        margin-left: 24rpx;
      }
      .val_news {
        flex: 1;
        height: 100%;
        overflow: hidden;
        color: #000000;
        margin-left: 26rpx;
      }
      image {
        width: 32rpx;
        height: 32rpx;
        display: block;
        margin-right: 22rpx;
      }
    }
  }
}
.goodsBanner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 750rpx;
  height: 750rpx;
  opacity: 1;
  position: relative;
  padding-top: 10rpx;
  .goodsAction {
    width: 681rpx;
    height: 109rpx;
    opacity: 1;
    background: linear-gradient(180deg, #fb4d2e, #fb8a03);
    border-radius: 16px;
    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: -28rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .goodsCenter {
      height: 30rpx;
      opacity: 1;
      font-size: 30rpx;
      font-family: SourceHanSansCN-Regular;
      text-align: left;
      color: #ffffff;
      line-height: 33rpx;
      letter-spacing: 2rpx;
    }
    .goodsRight {
      width: 158rpx;
      height: 66rpx;
      border-radius: 30rpx;
      opacity: 1;
      font-size: 32rpx;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      text-align: left;
      color: #ffffff;
      background: #ffc178;
      line-height: 66rpx;
      letter-spacing: 2rpx;
      text-align: center;
    }
  }
}
.goodsPrice {
  width: 678rpx;
  margin: 0 auto;
  padding-top: 43rpx;
  .nowPrice {
    // width: 126rpx;
    display: inline-block;
    height: 42rpx;
    opacity: 1;
    font-size: 42rpx;
    font-family: SourceHanSansCN-Medium;
    text-align: left;
    color: #fb4d2e;
    line-height: 33rpx;
  }
  .countPrice {
    display: inline-block;
    width: 124rpx;
    height: 42rpx;
    opacity: 1;
    font-size: 30rpx;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    // text-decoration: line-through;
    text-align: left;
    color: #707070;
    line-height: 42rpx;
    letter-spacing: 0rpx;
    margin: 0 20rpx;
  }
  .rightIcon {
    display: flex;
    justify-content: flex-end;
  }

  .rightSales {
    display: inline-block;
    // float: right;
    width: 100%;
    height: 30rpx;
    opacity: 0.8;
    font-size: 30rpx;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    line-height: 33rpx;
    text-align: right;
    color: #707070;
  }
  .shopDes {
    display: inline-block;
    width: 100%;
    // height: 32rpx;
    opacity: 1;
    font-size: 32rpx;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: left;
    color: #707070;
    // line-height: 33rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 10rpx;
  }
  .goodsName {
    width: 678rpx;
    // height: 46rpx;
    display: inline-block;
    opacity: 1;
    font-size: 38rpx;
    font-family: SourceHanSansCN-Regular;
    text-align: left;
    color: #333333;
    line-height: 46rpx;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    margin-top: 28rpx;
  }
}
// 广告
.ap {
  display: flex;
  justify-content: space-around;
  height: 66rpx;
  align-items: center;
}
.advertising {
  margin: 0 auto;
  width: 705rpx;
  height: 66rpx;

  background: rgba(253, 105, 14, 0.2);
  border-radius: 16rpx;
  box-shadow: 0rpx 8rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
  margin-top: 25rpx;
  .iconPrice {
    width: 33rpx;
    height: 39rpx;
    line-height: 66rpx;
    margin-left: 9rpx;
    margin-bottom: 10rpx;
  }
  .adWord {
    // width: 451rpx;
    height: 66rpx;
    opacity: 1;
    font-size: 28rpx;
    font-family: SourceHanSansCN-Regular;
    text-align: left;
    color: #ae5a2a;
    line-height: 66rpx;
    letter-spacing: 2rpx;
    text-indent: 10rpx;
  }
  .goUpdate {
    width: 100%;
    height: 66rpx;
    opacity: 1;
    font-size: 28rpx;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: left;
    color: #ae5a2a;
    line-height: 66rpx;
    letter-spacing: 1rpx;
    .rightUp {
      width: 18rpx;
      height: 32rpx;
      opacity: 1;
      color: #ae5a2a;
    }
  }
}
.titlebox {
  display: flex;
  .pricebox {
    display: flex;
    flex-direction: column;
    .yuanjia {
      text-decoration: line-through;
      height: 30rpx;
      opacity: 1;
      font-size: 30rpx;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      text-decoration: line-through;
      text-align: left;
      color: #707070;
      letter-spacing: 0rpx;
    }
  }
  .huiyuan {
    background: #fd690e;
    width: 110rpx;
    height: 40rpx;
    margin-left: 10rpx;
    opacity: 1;
    font-size: 24rpx;
    font-family: SourceHanSansCN-Regular;
    text-align: center;
    color: #ffffff;
    line-height: 40rpx;
  }
}
.noticeBar {
  position: fixed;
  z-index: 11111;
  top: 60rpx;
  width: 460rpx;
  font-size: 24rpx;
  padding: 0 10rpx;
  height: 60rpx;
  top: 120rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 40rpx;
  display: flex;
  color: #fff;
  justify-content: center;
  align-items: center;
}
</style>